<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
    //如果JQ代码写在body前，必须将代码写在ready事件中，ready事件表示所有DOM加载完成之后才执行。
    $(document).ready(function(){
        console.log($('.box'))
    }) 
    //简化写法：
    $(function(){
        console.log($('.box'))
    })
    $(function(){ //ready事件可以写多个，相当于JS中的onload事件，根onload的区别是：可以出现多次，而onload在一个页面只能出现一次。
        console.log($('.box'))
    })
</script>-->
  </head>
  <body>
    <div id="box">id</div>
    <div class="box">class1</div>
    <div class="box">class2</div>
    <div class="box">class3</div>
    <p>KJSDHFJHSAKJGH1</p>
    <p>KJSDHFJHSAKJGH2</p>
    <p>KJSDHFJHSAKJGH3</p>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    console.log($(".box"));
    //id
    $("#box").css({
      color: "blue",
      background: "#eee",
    });

    //class
    $(".box").css({
      color: "red",
      background: "#eee",
      //'margin-bottom':"10px", //有短横线必须加引号
      marginBottom: "10px", //小驼峰写法
    });

    //标签名
    $("p").css({
      color: "pink",
    });
    //*
    console.log($('*'))

    //逗号
    $('#box,.box,p').click(function(){
        console.log($(this).html())
    })
  </script>
</html>
